
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .clock {
                width: 300px;
                height: 300px;
                border: 2px solid black;
                position: relative;
                border-radius: 50%;
            }

            .num {
                position: absolute;
                width: 100%;
                height: 100%;
                /* background-color: pink; */
                text-align: center;
            }

            .num span {
                display: inline-block;
            }

            .hand {
                width: 10px;
                height: 50%;
                background-color: black;
                position: absolute;
                left: 0;
                right: 0;
                margin: 0 auto;
                bottom: 50%;
                transform-origin: bottom;
            }

            .sec {
                width: 2px;
                height: 45%;
                background-color: red;
            }

            .min {
                width: 6px;
                height: 40%;

            }

            .hour {
                height: 35%;
            }
        </style>
    </head>

    <body>
        <div class="clock">
            <div class="num"><span>1</span></div>
            <div class="num"><span>2</span></div>
            <div class="num"><span>3</span></div>
            <div class="num"><span>4</span></div>
            <div class="num"><span>5</span></div>
            <div class="num"><span>6</span></div>
            <div class="num"><span>7</span></div>
            <div class="num"><span>8</span></div>
            <div class="num"><span>9</span></div>
            <div class="num"><span>10</span></div>
            <div class="num"><span>11</span></div>
            <div class="num"><span>12</span></div>
            <div class="hour hand"></div>
            <div class="min hand"></div>
            <div class="sec hand"></div>
        </div>
        <script>
            var num=document.getElementsByClassName("num")
        for(var i=0;i<num.length;i++)
        {
            num[i].style.transform=`rotate(${30*(i+1)}deg)`

        }
        // querySelector
        // querySelectorAll
        var span=document.querySelectorAll("span")
        // var span = document.getElementsByClassName("span");
        // var span = document.getElementsByTagName("span");
        for(var i=0;i<span.length;i++)
        {
            span[i].style.transform=`rotate(${-30*(i+1)}deg)`

        }
        function setClock(){
            var date=new Date();
            var hh=date.getHours();
            var mm=date.getMinutes();
            var ss=date.getSeconds();
            var hour=document.getElementsByClassName("hour")[0];
            var min=document.getElementsByClassName("min")[0];
            var sec=document.getElementsByClassName("sec")[0];
            hour.style.transform=`rotate(${hh*30+mm/60*30}deg)`;
            min.style.transform=`rotate(${mm*6+ss/60*6}deg)`
            sec.style.transform=`rotate(${ss*6}deg)`;
        }
        setClock();
        setInterval(setClock,1000);
        // setInterval(function(){
        //     setClock();
        // },1000);

        



        </script>
    </body>

    </html>
